<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">
		<el-tabs v-model="activeName">
			<el-tab-pane label="注册与访问" name="first">
				<el-form ref="form" :model="form" label-width="130px">
					<el-form-item label="是否允许注册会员">
						<el-radio-group v-model="form.open_reg" size="mini">
							<el-radio-button :label="1">是</el-radio-button>
							<el-radio-button :label="0">否</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="注册类型">
						<el-radio-group v-model="form.reg_method" size="mini">
							<el-radio-button label="username">普通注册</el-radio-button>
							<el-radio-button label="phone">手机注册</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="密码最小长度">
						<el-input style="width: 25%;" 
						size="mini" 
						type="number" 
						v-model="form.password_min" 
						placeholder="密码最小长度"></el-input>
					</el-form-item>
					<el-form-item label="强制密码复杂度">
						<el-checkbox-group v-model="form.password_encrypt"
						size="mini">
						    <el-checkbox label="0">数字</el-checkbox>
						    <el-checkbox label="1">小写字母</el-checkbox>
						    <el-checkbox label="2">大写字母</el-checkbox>
						    <el-checkbox label="3">符号</el-checkbox>
						  </el-checkbox-group>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="上传设置" name="second">
				<el-form ref="form" :model="form" label-width="130px">
					<el-form-item label="默认上传空间">
						<el-radio-group v-model="form.upload_method" size="mini">
							<el-radio-button label="local">本地</el-radio-button>
							<el-radio-button label="oss">阿里云</el-radio-button>
						</el-radio-group>
					</el-form-item>
					<template v-if="form.upload_method == 'oss'">
						<el-form-item label="Bucket">
							<el-input style="width: 25%;"
							size="mini" 
							v-model="form.upload_config.Bucket" 
							placeholder="Bucket"></el-input>
						</el-form-item>
						<el-form-item label="AccessKey">
							<el-input style="width: 25%;"
							size="mini" 
							v-model="form.upload_config.ACCESS_KEY" 
							placeholder="AccessKey"></el-input>
						</el-form-item>
						<el-form-item label="SecretKey">
							<el-input style="width: 25%;"
							size="mini" 
							v-model="form.upload_config.SECRET_KEY" 
							placeholder="SecretKey"></el-input>
						</el-form-item>
						<el-form-item label="空间域名">
							<el-input style="width: 25%;"
							size="mini" 
							v-model="form.upload_config.http" 
							placeholder="空间域名"></el-input>
							<small class="text-secondary d-block">http://或者https://</small>
						</el-form-item>
					</template>
					
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="Api安全" name="third">
				<el-form ref="form" :model="form" label-width="130px">
					<el-form-item label="是否开启api安全">
						<el-radio-group v-model="form.api_safe" size="mini">
							<el-radio-button :label="1">是</el-radio-button>
							<el-radio-button :label="0">否</el-radio-button>
						</el-radio-group>
						<small class="text-secondary d-block">开启后调用前端api需要传递密钥串</small>
					</el-form-item>
					<el-form-item label="密钥">
						<el-input style="width: 50%;"
						size="mini" 
						v-model="form.api_secret" 
						placeholder="密钥"></el-input>
						<small class="text-secondary d-block">密钥关系api调用传输签名串生成，token解析。设置后要求重新登录</small>
					</el-form-item>
					
				</el-form>
			</el-tab-pane>
		</el-tabs>
		
		<el-form label-width="160px">
			<el-form-item >
				<el-button
				type="primary"
				@click="submit()"
				size="mini">保存</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default { 
		inject:['layout'],
		
		created() {
			this.getData()
		},
		
		data() {
			return {
				activeName: 'first',
				
				form: {
					open_reg: 1,
					reg_method: 'username',
					
					password_min: 6,
					password_encrypt: ["0"],
					
					upload_method: 'local',
					upload_config: {
						Bucket:'',
						ACCESS_KEY:'',
						SECRET_KEY:'',
						http:''
					},
					api_safe: 1,
					api_secret:'',
				}
			}
		},
		
		methods: {
			getData() {
				this.layout.showLoading()
				this.axios.get('/admin/sysconfig', {token: true})
					.then(res => {
						this.form = res.data.data
						this.form.password_encrypt = this.form.password_encrypt.split(',').map(v => v.trim())
						this.layout.hideLoading()
					}).catch(err => {
						this.layout.hideLoading()
					})
			},
			
			submit() {
				this.form.password_encrypt = this.form.password_encrypt.filter(v => v <= 3).join(',')
				this.layout.showLoading()
				this.axios.post('/admin/sysconfig', this.form, {token: true})
					.then(res => {
						this.getData()
						this.layout.hideLoading()
						this.$message({
							message: '恭喜你，修改成功',
							type: 'success'
						});
					}).catch(err => {
						this.layout.hideLoading()
					})
			}
		}
	}
</script>

<style>
</style>
